<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表全选</title>
    <style>
        /*伪类*/
        td:hover{
            background-color: #222222;
        }
    </style>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function (){
            $("#selectAll").click(function (){
                //如果用attr  标签里面没有写  获取不到value值 有才能获取到
                //例：$(this).prop("checked"); 获取值为Undefined
                //用prop可以获取
                var prop = $(this).prop("checked");
                $(".item").attr("checked",prop);
            })
            $(".item").click(function (){
                if($(".item:checked").length===$(".item").length){
                    $("#selectAll").prop("checked",true)
                }else{
                    $("#selectAll").prop("checked",false)
                }
            })
        })
    </script>
</head>
<body>
<h3>列表选择</h3>
<
<input type="checkbox" id="selectAll"> 全选<br>
<ul>
    <li><input type="checkbox" class="item">选择1</li>
    <li><input type="checkbox" class="item">选择2</li>
    <li><input type="checkbox" class="item"> 选择3</li>
    <li><input type="checkbox" class="item"> 选择4</li>
</ul>
<script>
//         // Select All
//         //change事件通常与表单元素（如输入框、复选框、下拉列表等）一起使用。
//         // .change(function() { ... })  为那个复选框附加一个 change 事件监听器。所以每当它被选中或取消选中时,里面的函数都会运行。
//         $("#selectAll").change(function() {
//             //.prop()  方法用于获取或设置元素的属性值。
//             //.prop()  与  .attr()  方法的主要区别在于:
// //             -  .prop()  适用于布尔值属性,比如  checked , selected  或  disabled 。
// // -               .attr()  适用于字符串属性,
//             var prop = $(this).prop("checked");
//             $(".item").attr("checked",prop );
//         });
//
//         $(".item").change(function() {
//             if ($(".item:checked").length === $(".item").length) {
//                 $("#selectAll").attr("checked", true);
//             } else {
//                 $("#selectAll").attr("checked", false);
//             }
//         });
</script>
</body>
</html>